import Image from "next/image";

import getLikedSongs from "@/actions/getLikedSongs";
import Header from "@/components/Header";

export const revalidate = 0;

const Liked = async() => {
  const songs = await getLikedSongs();

  return (
    // 内容卡片
    <div className="
      bg-neutral-900
      rounded-lg
      h-full
      w-full
      overflow-hidden
      overflow-y-auto
    ">
      {/* 标题 */}
      <Header>
        <div className="mt-20">
          <div className="
            flex
            flex-col
            md:flex-row
            items-center
            gap-x-5
           ">
              {/* 左侧图片 */}
              <div className="
                relative
                h-32
                w-32
                lg:h-44
                lg:w-44
              ">
                <Image
                  fill
                  src="/images/liked.png"
                  alt="PlayList"
                  className="object-cover"
                />
              </div>
              {/* 右侧标题 */}
              <div className="
                flex
                flex-col
                gap-y-2
                mt-4
                md:mt-0
              ">
                <p className="
                  hidden
                  md:block
                  font-semibold
                  text-sm
                ">播放列表</p>
                <h1 className="
                  text-white
                  text-4xl
                  sm:text-5xl
                  lg:text-7xl
                  font-bold
                ">喜欢歌曲</h1>
              </div>
           </div>
        </div>
      </Header>
    </div>
  )
}

export default Liked;